<body>
<h1>IScriptDesgin</h1>
<h2>Add interaction and scripts to your design.</h2>
<h3>Introduction</h3>
<p>HTML was originally about presentation however it is legitimate to say that HTML's popularity is in great part due to the possibility of interaction.  Interaction is hardly ever found in graphics, yet graphics and dynamic graphics like movies enjoy a tremendous popularity, imagine what would happen if you allow interaction in graphics..</>
<p>One application of interaction in graphics is the display of diagrams, by choosing between different formats or range of values. Another yet unknown use case are template models. Do you still remember the days that, as a youngster, you received paper models as birthday gifts from family and friends? Keep those paper models in mind and..</p>
<ul><li>Imagine the possibility of changing some of your object's dimensions (not plain scaling of your complete object, instead changing only height, and steepness of your roof for example).</li>
<li>
Share it online so the whole world can benefit from it. </li>
<li>Benefit yourself from a library of tested and well documented components to use in you own template models.</li>
<li>Do you still think that paper models can only be printed on paper? Instead of printers bring lasercutters, watercutters and cnc routers into action. These toys become more and more available to an increasing audience. Broaden your set of materials with plywood, glass, acrylic, iron to name a few. Go beyond the paper and go beyond the model. Build some Thing. For real!</li>
</ul>
<p>iScriptDesign has been developed considering all of the above bullets, and is developed using open and license friendly frameworks and formats, leveraging the power of SVG in a not so traditional way. It has proven to be an indispensable tool for me while constructing my own parameterizable furniture out of simple sheets of plywood.</p>
<p>The customizable SVG introduced in iScriptDesign is a yet unseen way of preprocessing SVG. Interactive SVG can traditionally be obtained by embedding ecmascript, inside the SVG file, capable of selecting, transforming and changing DOM elements. However the most sophisticated element for outlining artefacts is the path element, which happens to be unusable for DOM selection as it's content is embedded in a single attribute containing the complete path data in a single string or rather CLOB (in databases known as Character Large Object).  Unfortunately there is no possibility of inserting hooks next to the defined commands to allow embedded scripts peeking and poking inside the path data. Nor is it possible to insert chunks of text within the path data, to allow for scripted creation of, for example, repeated objects.</p>
<p>iScriptDesign tackles above mentioned shortcomings by allowing directives inside the SVG which will be processed before the SVG engine starts rendering. The directives do resemble the macro references known from unix's make, and allow for parameter substitution or execution of defined functions. These functions may be defined embedded, in the SVG file, or externally in a javascript library. The latter offering the possibility of reuse of earlier created, documented and tested  components, for use within your own design.</p>
<h3>Usage</h3>
<p>A typical parameterizable path attribute looks like:</p>
<ol>
<li>&lt;path id=&quot;spline&quot;</li>
<li>d=&quot;M 20 20 c 50 50 #{end_x-delta} 450 #{end_x}&quot;/&gt;</li>
</ol>
<p>Where end_x-delta and end_x are predefined, calculated, or human entered parameters,  get substituted in the preprocessing phase.</p>
<p>
Starting with path's like this, it's very tempting, and in fact rewarding, to leverage the available javascript and replace the complete path with a JSON like notation in a separate var definition:</p>
<ol>
<li>var r1 = [[{x:6*distance, y:0}]]</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;.concat(rotate(mirror(
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pensEdge(distance, depth, 3, </li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{bitRadius: bitRadius, overshoot: 7, </li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;startWithEar: true, spaceFirst: true}),'x'),</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2*Math.PI/6))</li>
</ol>
<p>pensEdge, rotate, mirror are user defined function made available by a library.  The [] and {} are JSON constructs. Concat, a javascript routine, glues the first array and its argument, the final outcome of rotate, together. The JSON expression is now translated back to path data with:<p>
<ol>
<li>&lt;path id=&quot;spline&quot; </li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;d=&quot;M 20 20 #{array2String(r1)}&quot;/&gt;</li>
</ol>
<p>JSON is nothing but an array of associative arrays, also called &quot;objects&quot;. As objects are by definition free from format rules, different declared definitions may be used to capture path data. One may think of the format for polar notation, or a format for adding a weight factor for the &quot;smooth curve&quot; (s).</p>
<p>With iScriptDesign and its scripted components I offer alternatives for 2D and 2.5D CNC input. Currently SVG sec is useable as input for some lasercutters. The transformation to DXF (the current workable CNC format) is, to my best knowledge, only flawless possible in commercial available products. However as DXF is only an intermediate format to gcode (the final CNC format), my next challenge is extending iScriptDesign with direct gcode export functionality. In combination with parameterizable templates a powerful and innovative way for designing and producing your artefacts.</p>
</body>
